<template>
	<view class="content-b">
		<view class="tips">为了确保测额的准确性，以下信息需要如实填写，谢谢配合！</view>
		<!-- 个人信息 -->
		<view class="container">
			<!-- 标题 -->
			<view class="flex-align title">
				<view class="line"></view>
				<text>个人信息</text>
			</view>
			<view class="item-info flex-space">
				<text class="item-title">手机号码</text>
				<input @input="bindinput" data-key="name" placeholder-class="input-plac" type="text"
					class="input-text"  placeholder="请输入姓名" />
			</view>
			<view class="item-info flex-space">
				<text class="item-title">类型</text>
				<formItem :range="typeArray" :keyValue="'personType'" @pickerChange="pickerChange">
					<text v-if="formData.personType!=''"> {{formData.personType}}</text>
					<text v-else class="pla-text">请选择类型</text>
					<image src="../../static/image/page/arrow-icon.png" class="arrow-icon"></image>
				</formItem>
			</view>
			<view class="item-info flex-space">
				<text class="item-title">婚姻状况</text>
				<formItem :range="marriageArray" :keyValue="'marriageInfo'" @pickerChange="pickerChange">
					<text v-if="formData.marriageInfo!=''"> {{formData.marriageInfo}}</text>
					<text v-else class="pla-text">请选择婚姻状况</text>
					<image src="../../static/image/page/arrow-icon.png" class="arrow-icon"></image>
				</formItem>
			</view>
			<view class="item-info flex-space">
				<text class="item-title">签约类型</text>
				<text v-if="formData.productId==3">正常签</text>
				<formItem v-else :range="signingArray" :keyValue="'signType'" @pickerChange="pickerChange">
					<text v-if="formData.signType!=''"> {{formData.signType}}</text>
					<text v-else class="pla-text">请选择签约类型</text>
					<image src="../../static/image/page/arrow-icon.png" class="arrow-icon"></image>
				</formItem>
			</view>
			<view class="item-info flex-space">
				<text class="item-title">手机号码</text>
				<input @input="bindinput" data-key="phone" placeholder-class="input-plac" type="number"
					class="input-text" maxlength="11" placeholder="请输入手机号码" />
			</view>
			<view class="item-info flex-space no-border">
				<text class="item-title">验证码</text>
				<view class="flex-align">
					<input @input="bindinput" data-key="code" placeholder-class="input-plac" type="text"
						class="input-text" placeholder="请输入验证码" />
					<view :class="['yzm-btn',[isClick?'active-yzm':'']]" @click="getCode">
						{{isClick?timer + 's 后重试' :'发送验证码'}}
					</view>
				</view>
			</view>
		</view>
		<!-- 分割条 -->
		<view class="fg-line"></view>
		<!-- 房产信息 -->
		<view class="container">
			<!-- 标题 -->
			<view class="flex-align title">
				<view class="line"></view>
				<text>房产信息</text>
			</view>
			<view class="item-info flex-space">
				<text class="item-title">房产地区</text>
				<pickers @address="bindRegionChange" :defaultAddress="region">
					<view class="picker">
						<text v-if="region[1]!=''"> {{region[0]}} {{region[1]}} {{region[2]}}</text>
						<text v-else class="pla-text">请选择房产地区</text>
						<image src="../../static/image/page/arrow-icon.png" class="arrow-icon"></image>
					</view>
				</pickers>
			</view>
			<view class="item-info flex-space">
				<text class="item-title">所在小区</text>
				<input @input="bindinput" data-key="housingEstate" placeholder-class="input-plac" type="text"
					class="input-text" placeholder="请输入小区名称" />
			</view>
			<view class="item-info flex-space">
				<text class="item-title">面积</text>
				<view class="flex-align">
					<input :value="formData.area" @input="bindinput" data-key="area" placeholder-class="input-plac"
						type="digit" class="input-text" placeholder="请输入房屋面积(40-399)" maxlength="6" />
					<view class="unit">m²</view>
				</view>
			</view>
			<view class="item-info flex-space no-border">
				<text class="item-title">所在楼层</text>
				<input @input="bindinput" data-key="floorNum" placeholder-class="input-plac" type="number"
					class="input-text" placeholder="请输入房屋楼层" />
			</view>
			<view class="item-info flex-space">
				<text class="item-title">房屋类别</text>
				<formItem :range="housArray" :keyValue="'houseType'" @pickerChange="pickerChange">
					<text v-if="formData.houseType!=''"> {{formData.houseType}}</text>
					<text v-else class="pla-text">请选择房屋类别</text>
					<image src="../../static/image/page/arrow-icon.png" class="arrow-icon"></image>
				</formItem>
			</view>
			<view class="item-info flex-space">
				<text class="item-title">建成年代</text>
				<view class="flex-align flex-1">
					<input @input="bindinput" data-key="builtYear" placeholder-class="input-plac" type="number"
						class="input-text" placeholder="请输入建成年代(20年内)" maxlength="4" />
					<view class="unit">(年)</view>
				</view>
			</view>
			<view class="item-info flex-space">
				<text class="item-title">房屋性质</text>
				<formItem :range="natureArray" :keyValue="'houseNature'" @pickerChange="pickerChange">
					<text v-if="formData.houseNature!=''"> {{formData.houseNature}}</text>
					<text v-else class="pla-text">请选择房屋性质</text>
					<image src="../../static/image/page/arrow-icon.png" class="arrow-icon"></image>
				</formItem>
			</view>
			<view class="item-info flex-space">
				<text class="item-title">房屋总价</text>
				<view class="flex-align">
					<input  @input="bindinput" data-key="housingPrice" placeholder-class="input-plac" type="digit"
						maxlength="9"  class="input-text" v-model="formData.housingPrice" placeholder="请输入房屋总价" />
					<view class="unit">(万元)</view>
				</view>
			</view>
			<view class="item-info flex-space">
				<text class="item-title">是否有抵押</text>
				<view class="flex-align">
					<view class="flex-align" @click="isDY" data-type="1" data-key="isMortgage">
						<image v-if="formData.isMortgage==0" src="../../static/image/page/zc-wxz-icon.png"
							class="select-icon" alt="" />
						<image v-else src="../../static/image/page/ed-xz.png" class="select-icon" alt="" />
						<text>是</text>
					</view>
					<view class="flex-align" @click="isDY" data-type="0" data-key="isMortgage">
						<image v-if="formData.isMortgage==1" src="../../static/image/page/zc-wxz-icon.png"
							class="select-icon" alt="" />
						<image v-else src="../../static/image/page/ed-xz.png" class="select-icon" alt="" />
						<text>否</text>
					</view>

				</view>
			</view>
			<view class="item-info flex-space" v-if="formData.isMortgage==1">
				<text class="item-title">一押贷款机构名称</text>
				<input @input="bindinput" data-key="firstLoanName" placeholder-class="input-plac" type="text"
					class="input-text" placeholder="请输入一押贷款机构名称" />
			</view>
			<view class="item-info flex-space" v-if="formData.isMortgage==1">
				<text class="item-title">一押贷款余额</text>
				<view class="flex-align">
					<input @input="bindinput" data-key="firstLoanBalance" placeholder-class="input-plac" type="digit"
						maxlength="9" v-model="formData.firstLoanBalance" class="input-text" placeholder="请输入一押贷款余额" />
					<view class="unit">(万元)</view>
				</view>
			</view>
			<view class="item-info flex-space" v-if="formData.isMortgage==1">
				<text class="item-title">当前是否有二押</text>
				<view class="flex-align">
					<view class="flex-align" @click="isDY" data-type="1" data-key="haveSecondLoan">
						<image v-if="formData.haveSecondLoan==0" src="../../static/image/page/zc-wxz-icon.png"
							class="select-icon" alt="" />
						<image v-else src="../../static/image/page/ed-xz.png" class="select-icon" alt="" />
						<text>是</text>
					</view>
					<view class="flex-align" @click="isDY" data-type="0" data-key="haveSecondLoan">
						<image v-if="formData.haveSecondLoan==1" src="../../static/image/page/zc-wxz-icon.png"
							class="select-icon" alt="" />
						<image v-else src="../../static/image/page/ed-xz.png" class="select-icon" alt="" />
						<text>否</text>
					</view>

				</view>
			</view>
		</view>

		<!-- 按钮 -->
		<view class="btn" @click="submit">提交</view>
	</view>
</template>

<script>
	import formItem from '../../components/form-item/index';
	import pickers from "@/components/ming-picker/ming-picker.vue"
	export default {
		components: {
			formItem,pickers
		},
		data() {
			return {
				typeArray: ['企业主', '工薪族', '个体户'], //类型
				marriageArray: ['未婚', '已婚', '离异'], //婚姻状况
				signingArray: ['正常签', '单签'], //签约类型
				housArray: ['楼梯房', '电梯房', '洋房'], //房屋类型
				natureArray: ['出让', '划拨'], //房屋性质
				formData: {
					productId: '', //产品id, 担保安居分：13 融银贷11 乐业保3   乐业宝签约类型默认 ‘正常签’
					name:'',//姓名
					personType: '', //类型
					marriageInfo: '', //婚姻状况
					signType: '', //签约类型
					phone: '', //手机号码
					code: '', //验证码
					housingEstate: '', //所在小区
					area: '', //面积
					floorNum: '', //所在楼层
					houseType: '', //房屋类别
					builtYear: '', //建成年代
					houseNature: '', //房屋性质
					housingPrice: '', //房屋总价
					isMortgage: 0, //是否有抵押(1是0否)
					firstLoanName: '', //一押贷款机构名称
					firstLoanBalance: '', //一押贷款余额
					haveSecondLoan: 0, //当前是否有二押(1是0否)
					province: '', //省
					city: '', //市
					region: '', //区县
				},
				region: ['重庆市', '', ''],
				timer: 60, //验证码倒计时
				isClick: false, //是否点击获取验证码
				year: new Date().getFullYear(), //当前年限
			}
		},
		onLoad: function(options) {
			this.formData.productId = options.id;
			this.formData.signType = options.id == 3 ? '正常签' : '';
		},

		methods: {
			onchange(e) {
				const value = e.detail.value
			},
			onnodeclick(node) {},
			//提交
			submit() {
				console.log(this.formData)
				let formData = this.formData;
				//  没填写贷款余额默认为0
				if (formData.firstLoanBalance == '') {

					this.formData.firstLoanBalance = 0

				}
				//没有贷款 设置全部为空
				if (formData.isMortgage == 0) {

					this.formData.firstLoanName = '';
					this.formData.firstLoanBalance = 0;
					this.formData.haveSecondLoan = 0;

				}
				//判断面积值是否输入正确
				if (formData.area < 40 || formData.area > 399) {
					uni.showToast({
						icon: 'none',
						title: '输入的面积值应在40-399之间',
					})
					return;
				}
				//判断是否输入正确的年限
				if ((this.year - formData.builtYear) > 20 || formData.builtYear > this.year) {
					uni.showToast({
						icon: 'none',
						title: '建成年限应填写20年内',
					})
					return;
				}
				this.$api.submitAppraisalInfo(this.formData).then(res => {
					uni.navigateTo({
						url: `/pages/ce-results/index?data=${res.data.data}&phone=${this.formData.phone}`,
					})
				})

			},
			//倒计时
			countdown() {
				let timing = setInterval(() => {
					this.timer--;
					if (this.timer <= 0) {

						this.timer = 60;
						this.isClick = false;

						clearInterval(timing);
					}
				}, 1000);
			},
			//获取验证码
			getCode() {
				if (!this.isClick) {
					if (this.formData.phone != '' && this.formData.phone.length == 11) {

						this.isClick = true;

						this.$api.getAppraisalCode(this.formData.phone);
						this.countdown();
					} else {
						uni.showToast({
							icon: 'none',
							title: '请填写完整电话',
						})
					}

				}
			},
			//选择地区
			bindRegionChange(e) {
				let value = e.value;
				this.region = value;
				this.formData.province = value[0];
				this.formData.city = value[1];
				this.formData.region = value[2];

			},

			//切换单选
			isDY(e) {
				let key = e.currentTarget.dataset.key;
				let type = e.currentTarget.dataset.type;

				this.formData[key] = +type;

			},
			//输入内容
			bindinput(e) {
				let key = e.currentTarget.dataset.key;
				let value = e.detail.value;
				//限制房屋总价和贷款余额输入限制
				if (key == 'housingPrice' || key == 'firstLoanBalance') {
					let number;
					number = value.substring(0, value.indexOf('.') + 5);
					this.$nextTick(()=>{
							this.formData[key] = number;
					})
				
				} else {
					this.formData[key] = value;
				}
				
			},

			//选择类型切换
			pickerChange(e) {
				this.formData[e.keyValue] = e.value
			},

		}
	}
</script>

<style scoped>
	/* pages/fill-info/index.wxss */
	page {
		background-color: #fff;
	}

	.content-b {
		padding-bottom: 10rpx;
	}

	.tips {
		width: 100%;
		height: 80rpx;
		background: #EEEEFE;
		padding: 0 30rpx;
		font-size: 24rpx;
		color: #333333;
		line-height: 80rpx;
	}

	.container {
		padding: 42rpx 30rpx 0;
	}

	.line {
		width: 8rpx;
		height: 28rpx;
		background: #585CF7;
		border-radius: 4rpx;
		margin-right: 13rpx;
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 26rpx;
	}

	.item-info {
		width: 100%;
		height: 110rpx;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.item-title {
		font-size: 30rpx;
		color: #333333;
	}

	.pla-text {
		color: #999999;
	}

	.arrow-icon {
		width: 13rpx;
		height: 24rpx;
		margin-left: 23rpx;
	}

	.input-text {
		text-align: right;
		font-size: 30rpx;
		color: #000;
		width: 100%;
		flex: 1;
		margin-left: 20rpx;
	}

	.yzm-btn {
		width: 138rpx;
		height: 58rpx;
		background: #5656E4;
		border: 1rpx solid #5656E4;
		border-radius: 29rpx;
		font-size: 22rpx;
		color: #FFFFFF;
		line-height: 57rpx;
		text-align: center;
		margin-left: 25rpx;
	}

	.active-yzm {
		background: #999;
		border: 1rpx solid #999;
	}

	.fg-line {
		width: 100%;
		height: 20rpx;
		background: #F8F8F8;
	}

	.no-border {
		border-bottom: none;
	}

	.unit {
		margin-left: 22rpx;
		font-size: 32rpx;
		color: #333333;
	}

	.input-plac {
		font-size: 30rpx;
		color: #999999;
	}

	.select-icon {
		width: 30rpx;
		height: 30rpx;
		margin-right: 21rpx;
		margin-left: 43rpx;
	}

	.btn {
		width: 690rpx;
		height: 98rpx;
		background: #585CF7;
		border-radius: 49rpx;
		margin: 60rpx auto 50rpx;
		text-align: center;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 98rpx;

	}
</style>
